<template>
	<view class="msg-step">
		<block v-for="(item, index) in steps" :key="index">
			<view class="msg-step-item" v-if="item.name !== '已完成'">
				<view class="left">
					<view class="icon"><view class="circle" :style="{borderColor: (active == 3 ? active + 2 : (active > 3 ? active + 3 : active)) >= index ? '#0091ff' : '#e9e9e9'}"></view></view>
					<view class="line" :style="{backgroundColor: (active == 3 ? active + 2 : (active > 3 ? active + 3 : active)) >= index ? '#0091ff' : '#e9e9e9'}" v-if="index != steps.length - 1"></view>
				</view>
				<view class="content">
					<view class="content-title">
						<view class="label" :style="{color: (active == 3 ? active + 2 : (active > 3 ? active + 3 : active)) >= index ? '#0091ff' : '#999999'}">{{ item.name }}</view>
						<view class="times" v-if="item.time">
							<view class="icon"><image src="../../../static/images/times.png"></image></view>
							<view>
								<text class="timeTxt">{{ item.time }}</text>
								</view>
						</view>
						<view class="times" v-else>
							<!-- <view class="times-empty"></view> -->
						</view>
					</view>
				
				</view>
			</view>

			<view class="msg-step-item" v-else>
				<view class="left">
					<view class="icon" v-if="active === 7"><image src="../../../static/images/finish.png"></image></view>
					<view class="icon" v-else><image src="../../../static/images/finish_gray.png"></image></view>
				</view>
				<view class="content">
					<view class="content-title" :style="{color: active === 7 ? '#0091ff' : '#999999'}">已完成</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	name: 'msg-step',
	props: {
		steps: {
			// 进度列表
			type: Array, 
			default: () => {
				return [];
			}
		},
		// 当前节点
		active: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {

	}
};
</script>

<style lang="scss">
.msg-step {
	width: 100%;
	line-height: 35rpx;
	&-item {
		display: flex;
		color: #333;
		.left {
			width: 40rpx;
			text-align: center;
			// background-color: #ebebeb;
			display: flex;
			flex-direction: column;
			position: relative;
			.icon {
				width: 100%;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
				.circle {
					width: 14rpx;
					height: 14rpx;
					background: #ffffff;
					border: 2rpx solid #0091ff;
					border-radius: 50%;
				}
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.line {
				width: 1rpx;
				height: 100%;
				position: absolute;
				bottom: -16rpx;
				left: calc(50% - 1rpx);
				z-index: 8;
				background-color: #e9e9e9;
			}
		}
		.content { 
			flex: 1;
			min-height: 80rpx;
			padding-bottom: 30rpx;
			padding-left: 10rpx;
			&-title {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #999999;
				.label{
					font-weight: 500;
				}
				.times{
					flex: 0 0 320rpx;
					font-size: 28rpx;
					//background-color: #F6F6F6;
					display: flex;
					align-items: center;
					color: #666666;
					.icon{
						display: flex;
						align-items: center;
					}
					image {
						width: 28rpx;
						height: 28rpx;
					}
					.timeTxt{
						color: #666; 
						font-weight: 400; 
						margin-left: 8rpx
					}
				}
				.times-empty{
					width: 28rpx;
					height: 28rpx;
					border: 2rpx dotted #999;
				}
			}
			&-user {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin: 15rpx 0;
				&-head {
					color: #fff;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					text-align: center;
					font-size: 21rpx;
					line-height: 46rpx;
					margin-right: 12rpx;
					background-color: #0091ff;
					overflow: hidden;
					text {
						width: 78rpx;
						display: block;
						margin-left: -14rpx;
						overflow: hidden;
					}
				}
				&-name{
					flex: 1;
				}
			}
			
			&-tips{
				font-size: 24rpx;
				padding: 12rpx 0;
				//background-color: #F6F6F6;
				display: flex;
				align-items: baseline;
				justify-content: flex-start;
				.label{
					margin-right: 12rpx;
				}
				.val{
					flex: 1;
				}
			}
			&-times{
				font-size: 28rpx;
				//background-color: #F6F6F6;
				display: flex;
				align-items: center;
				color: #666666;
				.icon{
					display: flex;
					align-items: center;
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	&-item:last-child {
		.icon {
			.circle {
				background: #0091ff;
			}
		}
	}
}
</style>
